import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Space, Button, Tooltip, Select, DatePicker } from "antd";
import { useEffect } from "react";
import { useTable } from "@/hooks/useTable";
import { useFormDialog } from "@/hooks/useForm";
import FormModal from "@/component/FormModal";
import CloudTable from "@/component/CloudTable";
import { page, del, batDel, save, edit } from "@/views/employee/staff/api";
import { SEX_ENUMS, SEX_OPTIONS } from '@/views/employee/staff/data';
import dayjs from 'dayjs';

const Staff = () => {

    // -------------------
    // ---   表单操作   ---
    // -------------------

    // 表单提交
    const onStaffFormCallback = (model) => {
        staffFormModal.onSubmit(model, staffTable.onReload);
    }

    // 表单设置
    const staffFormModal = useFormDialog({
        save: save,
        edit: edit,
        callback: onStaffFormCallback,
        items: [
            {
                label: '姓名',
                name: 'name',
            },
            {
                label: '员工码',
                name: 'code',
            },
            {
                label: '性别',
                name: 'sex',
                render: <Select placeholder='请选择性别' options={SEX_OPTIONS()} />,
            },
            {
                label: '年龄',
                name: 'age',
            },
            {
                label: '出生日期',
                name: 'birthday',
                render: <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
            },
            {
                label: '手机号',
                name: 'phone',
            },
            {
                label: '邮箱',
                name: 'mail',
            },
        ],
    });

    // -------------------
    // ---   表格操作   ---
    // -------------------

    // 表格自定义按钮
    const staffTools = () => {
        return (
            <Space>
                <Button type="primary" onClick={() => staffFormModal.isOpenDialog(undefined, '新增')}>新增</Button>
                <Button type='dashed' style={{ color: 'red' }} onClick={() => staffTable.onBatchRemove(staffTable.selected)}>删除</Button>
            </Space>
        );
    }
    
    // 表格列
    const staffColumns = [
        {
            title: '#',
            key: 'index',
            width: 50,
            align: 'center',
            fixed: 'left',
            render: (val, record, index) => {
                return index + 1;
            }
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            width: 135,
            ellipsis: true,
            search: 'default',
        },
        {
            title: '员工码',
            dataIndex: 'code',
            key: 'code',
            width: 135,
            ellipsis: true,
            search: 'default',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            width: 135,
            ellipsis: true,
            search: 'selected',
            options: SEX_OPTIONS(),
            render: (val) => SEX_ENUMS[val] || '',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            width: 135,
            ellipsis: true,
            search: 'default',
        },
        {
            title: '出生日期',
            dataIndex: 'birthday',
            key: 'birthday',
            width: 135,
            ellipsis: true,
            search: 'date',
            render: (val) => dayjs(val).format('YYYY-MM-DD'),
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
            ellipsis: true,
            width: 135,
            search: 'default',
        },
        {
            title: '邮箱',
            dataIndex: 'mail',
            key: 'mail',
            width: 'auto',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 120,
            align: 'center',
            fixed: 'right',
            render: (val, row) => {
                return (
                    <div>
                        <Tooltip title="编辑">
                            <Button type="text" size="small" icon={<EditOutlined />} style={{ margin: '0 4px', color: 'blue' }} onClick={() => onEditStaffHandler(row)} />
                        </Tooltip>
                        <Tooltip title="删除">
                            <Button type="text" size="small" icon={<DeleteOutlined />} style={{ margin: '0 4px', color: 'red' }} onClick={() => staffTable.onRemove(val)} />
                        </Tooltip>
                    </div>
                )
            }
        }
    ];

    const onEditStaffHandler = (model) => {
        let entity = {
            ...model,
            birthday: dayjs(model.birthday),
        }
        staffFormModal.isOpenDialog(entity, '编辑');

    }

    // 表格设置
    const staffTable = useTable({
        reload: page,
        remove: del,
        batchRemove: batDel,
        tools: staffTools,
        columns: staffColumns,
    });

    // -------------------
    // ---   方法事件   ---
    // -------------------

    useEffect(() => {
        staffTable.onReload();
    }, []);

    return (
        <>
            <CloudTable props={staffTable} />
            <FormModal props={staffFormModal} />
        </>
    );
}

export default Staff;